<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>


<style>
    /* 通配符选择器，是选中页面所有元素的 */
    * {
        /* 消除浏览器的默认样式 */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container {
        width: 600px;
        margin: 20px auto;
    }
    h1 {
        /* 文字居中 */
        text-align: center;
    }
    p {
        text-align: center;
        color: #666;
        margin: 20px 0;
    }
    .row {
        /* 设置成弹性布局 */
        display: flex;
        height:40px;
        /* 水平方向居中 */
        justify-content: center;
        /* 垂直方向居中 , 同时高度不再有效，不在和父元素相同*/ 
        align-items: center;
        
    }
    .row span {
        width: 80px;
    }
    .row input {
        width: 200px;
        height: 28px;
    }
    .row button {
        width: 280px;
        height: 30px;
        color: white;
        background-color: orange;
        /* margin: 40px 0; */
        /* 去掉边框 */
        border: none;
        /* 去掉直角，变成圆角 (倒角) */
        border-radius: 6px;
    }

    /* 点击的时候有个反馈：也就是换个颜色 */
    .row button:active {
        background-color: #666;
    }
</style>

</head>
<body>
    <div class="container">

        <h1>表白墙</h1>
        <p>输入内容后点击提交，信息会显示到下方表格中</p>
        <div class="row">

            <span>谁:</span>
            <input type="text">
        </div>

        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div>
        
        <div class="row">
            <span>说:</span>
            <input type="text">
        </div>

        <div class="row">
            <button id="submit">提交</button>
        </div>

        <div class="row">
            <button id="revert">撤销</button>
        </div>

    </div>

    <script>
        // 实现提交操作，点击提交按钮，就能够把用户输入的内容提交到页面上进行显示
        // 点击的时候，获取到三个输入框中的文本内容
        // 创建一个新的 div.row 把内容构造到这个 div 中即可
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        // 选中button这个按钮
        let button = document.querySelector('#submit');
        button.onclick = function() {

            // 1.获取到三个输入框中的内容
            let from = inputs[0].value; 
            let to = inputs[1].value; 
            let destination = inputs[2].value; 

            // 如果用户没有填写(空字符串)，则直接返回, 不会显示  对  说：
            if(from == 'null' || to == '' || destination == '') {
                return;
            }

            // 2.构造新的div语句 
            let rowDiv = document.createElement('div');

            
            // 加上属性 (类名字)
            // 注意 多个类属性的时候, 不加逗号
            rowDiv.className = 'row  message';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说：' + destination; 

            // 把这个div语句 加入到container中去
            containerDiv.appendChild(rowDiv);

            // 3.点击提交后，清空之前的输入框内容
            for (let input of inputs) {
                input.value = '';
            }
        }

        // 撤销操作
        let revert = document.querySelector('#revert');
        revert.onclick = function() {
            // 这个获取到的是一个 数组
            let rows = document.querySelectorAll('.message');
            //找到最后一条消息，进行删除即可
            // 选中所有的row，找到最后一个row
            if(rows == null || rows.length == 0) {
                return;
            }
            containerDiv.removeChild(rows[rows.length - 1]);
        }
    </script>
</body>
</html>